<template>
	<div class="content-outside">
		<div class="content">
			<h4>作品登记申请表
				<span>系统将自动保存填写的信息，可在个人中心下进行修改和删除</span>
			</h4>
			<div class="step_state">
				<div class="step step_01 clear current">
					<div class="step_info">
						<span>1</span>
						<span>作品信息</span>
					</div>
					<div class="step_border"></div>
				</div>
				<div class="step step_02 clear current">
					<div class="step_border"></div>
					<div class="step_info">
						<span>2</span>
						<span>权利状况</span>
						<span>说明</span>
					</div>
					<div class="step_border"></div>
				</div>
				<div class="step step_03 clear current">
					<div class="step_border"></div>
					<div class="step_info">
						<span>3</span>
						<span>留存样本</span>
					</div>
					<div class="step_border"></div>
				</div>
				<div class="step step_04 clear current">
					<div class="step_border"></div>
					<div class="step_info">
						<span>4</span>
						<span>申请人信息</span>
					</div>
				</div>
			</div>
			<div class="hr">
				<p>申请人及其他</p>
			</div>
			<div class="form_box">
				<el-form :model="degree_04" :rules="degree_04_rules" ref="degree_04" label-width="150px" class="demo-degree_04">
					<div class="form_width">
						<h3 class="h3">申请人信息：</h3>
						<el-form-item label="申请方式：" prop="applicant_type">
							<el-radio-group v-model="degree_04.applicant_type">
								<el-radio v-for="item in applicant_type" :label="item.value" :key="item.label">{{ item.label }}</el-radio>
								<!-- <el-radio label="由著作权人申请"></el-radio>
									<el-radio label="由代理人申请"></el-radio> -->
							</el-radio-group>
						</el-form-item>
						<el-row>
							<el-col :span="12">
								<el-form-item label="姓名/名称：" prop="applicant_name">
									<el-input v-model="degree_04.applicant_name"></el-input>
								</el-form-item>
								<el-form-item label="详细地址：" prop="applicant_address">
									<el-input v-model="degree_04.applicant_address"></el-input>
								</el-form-item>
								<el-form-item label="联系人：" prop="applicant_contact">
									<el-input v-model="degree_04.applicant_contact"></el-input>
								</el-form-item>
								<el-form-item label="email:" prop="applicant_email">
									<el-input v-model="degree_04.applicant_email"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="联系电话：" prop="applicant_tel">
									<el-input v-model="degree_04.applicant_tel"></el-input>
								</el-form-item>
								<el-form-item label="邮编：" prop="applicant_code">
									<el-input v-model="degree_04.applicant_code"></el-input>
								</el-form-item>
								<el-form-item label="手机：" prop="applicant_mobile">
									<el-input v-model="degree_04.applicant_mobile"></el-input>
								</el-form-item>
								<el-form-item label="传真:" prop="applicant_fax">
									<el-input v-model="degree_04.applicant_fax"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<div class="el-form-item">
							<label class="el-form-item__label">申请人委托下述代理人办理登记事宜，具体委托事项如下：</label>
							<el-input type="textarea" v-model="degree_04.applicant_commitment"></el-input>
						</div>

						<el-row>
							<el-col :span="12">
								<el-form-item label="代理人姓名/名称：" prop="agent_name">
									<el-input v-model="degree_04.agent_name"></el-input>
								</el-form-item>
								<el-form-item label="代理人详细地址：" prop="agent_address">
									<el-input v-model="degree_04.agent_address"></el-input>
								</el-form-item>
								<el-form-item label="代理人联系人：" prop="agent_contact">
									<el-input v-model="degree_04.agent_contact"></el-input>
								</el-form-item>
								<el-form-item label="代理人email:" prop="name">
									<el-input v-model="degree_04.agent_email"></el-input>
								</el-form-item>
							</el-col>

							<el-col :span="12">
								<el-form-item label="代理人联系电话：" prop="agent_tel">
									<el-input v-model="degree_04.agent_tel"></el-input>
								</el-form-item>
								<el-form-item label="代理人邮编：" prop="agent_code">
									<el-input v-model="degree_04.agent_code"></el-input>
								</el-form-item>
								<el-form-item label="代理人手机：" prop="agent_mobile">
									<el-input v-model="degree_04.agent_mobile"></el-input>
								</el-form-item>
								<el-form-item label="代理人传真:" prop="agent_fax">
									<el-input v-model="degree_04.agent_fax"></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-form-item label="委托书" prop="agent_proxy">
							<el-upload class="upload-demo" :action="uploadUrl" :data="fileInfo.dailiweituoshu" :on-success="proxySuccess" :before-upload="proxyUpload" :limit="1" :on-exceed="proxyExceed" :file-list="fileList.proxy">
								<el-button size="small" type="primary">上传附件</el-button>
								<!-- <span slot="tip" class="el-upload__tip">（请上传 jpg/png/gif/bmp 格式图片，小于2M）</span> -->
							</el-upload>
						</el-form-item>

						<el-form-item label="身份证明" prop="agent_id_card">
							<el-upload class="upload-demo" :action="uploadUrl" :data="fileInfo.dailishenfen" :on-success="cardSuccess" :before-upload="cardUpload" :limit="1" :on-exceed="cardExceed" :file-list="fileList.card">
								<el-button size="small" type="primary">上传附件</el-button>
								<!-- <span slot="tip" class="el-upload__tip">（请上传 jpg/png/gif/bmp 格式图片，小于2M）</span> -->
							</el-upload>
						</el-form-item>

						<h3 class="h3">作品自愿登记权利保证书：</h3>
						<el-form-item label="上传附件" prop="register_guarantee">
							<el-upload class="upload-demo" :action="uploadUrl" :data="fileInfo.ziyuanbaozhengshu" :on-success="registerSuccess" :before-upload="registerUpload" :limit="1" :on-exceed="registerExceed" :file-list="fileList.register">
								<el-button size="small" type="primary">上传附件</el-button>
								<!-- <span slot="tip" class="el-upload__tip">（请上传 jpg/png/gif/bmp 格式图片，小于2M）</span> -->
							</el-upload>
						</el-form-item>

					</div>
				</el-form>
			</div>
			<div class="form_next">
				<el-button type="text" @click="previousStep">返回上一步</el-button>
				<el-button type="primary" @click="updateinfoFn">提交</el-button>
				<!-- <el-button type="primary">预览</el-button> -->
			</div>
		</div>
	</div>
</template>

<script>
import { getStreamnum, autosubmit, submitfile, front } from "@/api";
import { mapState, mapMutations } from "vuex";

export default {
    data() {
        return {
            copyright_number: null,
            // 上传地址
            uploadUrl: submitfile,
            imageUrl: "",
            fileInfo: {
                dailiweituoshu: {
                    type: "pic",
                    folder: "dailiweituoshu"
                },
                dailishenfen: {
                    type: "pic",
                    folder: "dailishenfen"
                },
                ziyuanbaozhengshu: {
                    type: "pic",
                    folder: "ziyuanbaozhengshu"
                },
                ziyuanshenqingshu: {
                    type: "pic",
                    folder: "ziyuanshenqingshu"
                }
            },
            fileList: {
                proxy: [], // 上传附件
                card: [], // 上传附件
                apply: [], // 上传附件
                register: [] // 上传附件
            },

            applicant_type: [
                {
                    value: 1,
                    label: "由著作权人申请"
                },
                {
                    value: 2,
                    label: "由代理人申请"
                }
            ],

            degree_04: {
                applicant_type: 1, //  申请方式
                applicant_name: "", //  申请人姓名
                applicant_address: "", // 详细地址
                applicant_contact: "", // 联系人
                applicant_email: "", // Email
                applicant_tel: "", // 联系电话
                applicant_code: "", // 邮编
                applicant_mobile: "", // 手机
                applicant_fax: "", // 传真
                applicant_commitment: "", // 申请人委托......
                agent_name: "", // 代理人姓名
                agent_tel: "", // 代理人电话
                agent_address: "", //  代理恩详细地址
                agent_code: "", //  代理人邮编
                agent_contact: "", //  联系人
                agent_mobile: "", //  手机号
                agent_email: "", //  Email
                agent_fax: "", //  传真
                agent_proxy: "", //  委托书
                agent_id_card: "", //  身份证证明
                register_apply: "", // 申请书
                register_guarantee: "", // 保证书

                certificate_post_type: 1, // 登记证书发放方式
                certificate_post_name: "", // 收件人
                certificate_post_mobile: "", // 收件人联系方式
                certificate_post_address: "" // 收件人联系地址
            },

            degree_04_rules: {
                applicant_name: [
                    { required: true, message: "这是必填项或必选项" }
                ],
                applicant_mobile: [
                    { required: true, message: "这是必填项或必选项" }
                ],
                agent_name: [{ required: true, message: "这是必填项或必选项" }],
                agent_mobile: [
                    { required: true, message: "这是必填项或必选项" }
                ],
                agent_proxy: [
                    { required: true, message: "这是必填项或必选项" }
                ],
                agent_id_card: [
                    { required: true, message: "这是必填项或必选项" }
                ],
                register_guarantee: [
                    { required: true, message: "这是必填项或必选项" }
                ]
            }
        };
    },
	computed: {
		...mapState([
			'croUser',
		]),
	},
	methods: {
		...mapMutations([
			'OUT_LOGIN',
		]),
        // 取得方式证明
        proxySuccess(res, file) {
            if (res.data) {
                this.degree_04.agent_proxy = res.data;
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        proxyUpload(file) {},
        proxyExceed(files, fileList) {
            this.$message.warning(`只能上传1个文件`);
        },

        // 取得方式证明
        cardSuccess(res, file) {
            if (res.data) {
                this.degree_04.agent_id_card = res.data;
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        cardUpload(file) {},
        cardExceed(files, fileList) {
            this.$message.warning(`只能上传1个文件`);
        },

        // 保证书
        registerSuccess(res, file) {
            if (res.data) {
                this.degree_04.register_guarantee = res.data;
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        registerUpload(file) {},
        registerExceed(files, fileList) {
            this.$message.warning(`只能上传1个文件`);
        },

        // 获取已提交数据
        frontFn() {
            let para = {
                copyright_number: this.copyright_number,
                user_id: this.croUser.user_id
            };
            front(para).then(data => {
                let res = data.data;
                for (let i in res) {
                    this.degree_04[i] = res[i];
                }
                // this.degree_04 = data.data;
            });
        },
        // 上一步
        previousStep() {
            this.$router.push({
                path: "copyRightStep03",
                query: {
                    copyright_number: this.copyright_number
                }
            });
        },
        // 提交并预览
        previewFn() {
            this.$refs.degree_04.validate(valid => {
                if (valid) {
                    let para = Object.assign({}, this.degree_04);
                    para.islook = 1;
                    para.user_id = this.croUser.user_id;
                    para.copyright_number = this.copyright_number;
                    // 申请方式 - 由著作权人申请
                    if (para.applicant_type == 1) {
                        para.agent_name = ""; // 代理人姓名
                        para.agent_tel = ""; // 代理人电话
                        para.agent_address = ""; //  代理恩详细地址
                        para.agent_code = ""; //  代理人邮编
                        para.agent_contact = ""; //  联系人
                        para.agent_mobile = ""; //  手机号
                        para.agent_email = ""; //  Email
                        para.agent_fax = ""; //  传真
                        para.agent_proxy = ""; //  委托书
                        para.agent_id_card = ""; //  身份证证明
                        para.register_apply = ""; // 申请书
                        para.register_guarantee = ""; // 保证书
                    }

                    // 邮寄方式-自取
                    if (para.certificate_post_type == 1) {
                        para.certificate_post_name = ""; // 保证书
                        para.certificate_post_mobile = ""; // 保证书
                        para.certificate_post_address = ""; // 保证书
                    }

                    autosubmit(para).then(res => {
                        if (res.data) {

                            this.$router.push({
                                path: "preview",
                                query: {
                                    copyright_number: this.copyright_number
                                }
                            });

                        } else if(res.tologin) {
							this.OUT_LOGIN();
							this.$router.push('/login');
						}else {
							this.$message.error(res.msg);
						}
                    });
                }
            });
        },
        // 总提交
        autosubmitFn() {
            this.$refs.degree_04.validate(valid => {
                if (valid) {
                    let para = Object.assign({}, this.degree_04);
                    para.degree = 4;
                    para.user_id = this.croUser.user_id;
                    para.copyright_number = this.copyright_number;

                    // 申请方式 - 由著作权人申请
                    if (para.applicant_type == 1) {
                        para.agent_name = ""; // 代理人姓名
                        para.agent_tel = ""; // 代理人电话
                        para.agent_address = ""; //  代理恩详细地址
                        para.agent_code = ""; //  代理人邮编
                        para.agent_contact = ""; //  联系人
                        para.agent_mobile = ""; //  手机号
                        para.agent_email = ""; //  Email
                        para.agent_fax = ""; //  传真
                        para.agent_proxy = ""; //  委托书
                        para.agent_id_card = ""; //  身份证证明
                        para.register_apply = ""; // 申请书
                        para.register_guarantee = ""; // 保证书
                    }

                    // 邮寄方式-自取
                    if (para.certificate_post_type == 1) {
                        para.certificate_post_name = ""; // 保证书
                        para.certificate_post_mobile = ""; // 保证书
                        para.certificate_post_address = ""; // 保证书
                    }

                    autosubmit(para).then(res => {
                        if (res.data) {
                            this.$message({
                                message: msg,
                                type: "success"
                            });
                            this.$router.push({ path: "copyrightregister" });
                            // this.$refs['editOwner'].resetFields();
                            // this.ownerlistFn();
                        } else if(res.tologin) {
							this.OUT_LOGIN();
							this.$router.push('/login');
						}else {
							this.$message.error(res.msg);
						}
                    });
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    mounted() {
        // this.getStreamnumFn();
        this.copyright_number = this.$route.query.copyright_number;
        this.frontFn();
    }
};
</script>
<style lang="scss" scoped>
.content-outside {
    width: 100%;
    background: #f2f2f2;
    padding: 15px 0;
}
.content {
    width: 1200px;
    margin: 0px auto;
    box-sizing: border-box;
    padding: 15px;
    background: #fff;
    font-size: 14px;
}
.content h4 {
    font-size: 16px;
    // font-weight: normal;
}
.content h4 > span {
    font-size: 12px;
    font-weight: normal;
    padding-left: 25px;
}
/* hr */
.content .hr {
    position: relative;
    top: 0;
    left: 0;
    height: 50px;
    border-top: 1px solid #c6c6c6;
    margin-top: 20px;
    font-size: 17px;
}
.content .hr > p {
    position: relative;
    top: -17px;
    left: 0;
    width: 300px;
    height: 40px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    box-sizing: border-box;
    margin: 0 auto;
    background: #fff;
}

/* step 提交后 #37629d 填写前 #c6c6c6 */
.step_state {
    height: 90px;
    padding: 35px 0 55px 100px;
}
.step {
    float: left;
}
.step_border {
    display: inline-block;
    background: #c6c6c6;
    width: 90px;
    height: 1px;
    vertical-align: top;
    margin: 0;
    margin-top: 45px;
}
.step_info {
    display: inline-block;
    width: 90px;
    height: 90px;
    border: 1px solid #c6c6c6;
    border-radius: 50%;
    font-size: 14px;
    color: #999;
    box-sizing: border-box;
    padding-top: 15px;
    margin: 0 15px;
}
.step_info span {
    display: block;
    line-height: 22px;
    text-align: center;
}

.step.current .step_border {
    background: #37629d;
}
.step.current .step_info {
    border: 1px solid #37629d;
    color: #37629d;
}
.step_form_info {
    margin-top: 30px;
    background: #f2f2f2;
    padding: 0 30px 30px 30px;
}

.form_box {
    padding: 15px 15px 30px 15px;
    background: #f2f2f2;
}
.form_box .h3 {
    font-size: 16px;
    font-weight: normal;
    padding: 15px 0 25px 0;
}
.el-checkbox-group .el-checkbox {
    padding: 0px 15px 0px 0;
}
.el-radio-group .el-radio {
    padding-right: 15px;
    line-height: 36px;
}
.el-checkbox + .el-checkbox,
.el-radio + .el-radio {
    margin: 0;
}
.ff4949 {
    color: #ff4949;
    margin-right: 4px;
}
.form_next {
    text-align: center;
    padding: 25px 0;
}

.form_width {
    width: 1000px;
    margin-left: 80px;
}
</style>
